<template>
  <video class="onekit-camera"
         :class="onekitClass"
         :style="onekitStyle"
         :id="onekitId"
         ref="onekitCamera">
  </video>
</template>

<script>
import weixin_behavior from "../../behaviors/weixin_behavior"
import onekit_behavior from "../../behaviors/onekit_behavior"
import Vue from 'vue'
export default {
  name: "onekit-camera",
  mixins: [weixin_behavior, onekit_behavior],
  data: () => ({
    n: 0,
    mediaRecoder: ''
  }),
  props: {
    "mode": {
      type: String,
      default: "normal"
    },
    "resolution": {
      type: String,
      default: "medium"
    },
    "device-position": {
      type: String,
      default: "back"
    },
    "flash": {
      type: String,
      default: "auto"
    },
    "frame-size": {
      type: String,
      default: "medium"
    },

  },
  methods: {
    getUserMedia (constraints, success, error) {
      if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
      } else if (navigator.webkitGetUserMedia) {
        navigator.webkitGetUserMedia(constraints, success, error)
      } else if (navigator.mozGetUserMedia) {
        navigator.mozGetUserMedia(constraints, success, error);
      } else if (navigator.getUserMedia) {
        navigator.getUserMedia(constraints, success, error);
      }
    }
  },
  beforeDestroy () {
    this.$emit('Stop')
  },
  mounted () {
    const video = this.$refs.onekitCamera
    video.addEventListener('loadeddata', () => {
      // console.log(data)
      const initdata = {
        currentTarget: {
          dataset: {},
          id: '',
          offsetLeft: 0,
          offsetTop: 10
        },
        detail: { maxzoom: 15 },
        target: {
          dataset: {},
          id: '',
          offsetLeft: 0,
          offsetTop: 10
        },
        timeStamp: new Date().getTime(),
        type: 'init'
      }
      this.$emit('Initdone', initdata)
    })
    const success = stream => {
      video.srcObject = stream
      window.onekit_camera_stream = stream
      video.play()
    }

    const error = err => {
      this.$emit('Error', err)
    }

    let resolution
    if (this.resolution === 'low') resolution = 720
    if (this.resolution === 'medium') resolution = 1080
    if (this.resolution === 'high') resolution = 2160
    let devicePosition = 'user'
    if (this.devicePosition === 'frot') devicePosition = 'user'
    if (this.devicePosition === 'back') devicePosition = 'environment'

    if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
      this.getUserMedia({ video: { minwidth: resolution, facingMode: devicePosition } }, success, error);
    } else {
      alert('不支持访问用户媒体');
    }


  },
  watch: {
    devicePosition: {
      handler () {
        const video = this.$refs.onekitCamera
        const success = stream => {
          window.onekit_camera_stream = stream
          video.srcObject = stream
          video.play()

        }

        const error = err => {
          this.$emit('Error', err)
        }

        let resolution
        if (this.resolution === 'low') resolution = 360
        if (this.resolution === 'medium') resolution = 720
        if (this.resolution === 'high') resolution = 1080
        let devicePosition = 'user'
        if (this.devicePosition === 'frot') devicePosition = 'user'
        if (this.devicePosition === 'back') devicePosition = 'environment'

        if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
          const initdata = {
            currentTarget: {
              dataset: {},
              id: '',
              offsetLeft: 0,
              offsetTop: 10
            },
            detail: { maxzoom: 15 },
            target: {
              dataset: {},
              id: '',
              offsetLeft: 0,
              offsetTop: 10
            },
            timeStamp: new Date().getTime(),
            type: 'init'
          }
          this.$emit('Initdone', initdata)
          this.getUserMedia({ video: { minwidth: resolution, facingMode: devicePosition } }, success, error);
        } else {
          alert('不支持访问用户媒体');
        }
      }
    }
  }
}
</script>

<style>
</style>
